<template>
	<view class="content">
		<uni-row :gutter="8" class="">
			<uni-col :span="12" v-for="item in data" :key="item.id" @click="viewPost(item.id)">
				<view @click="viewPost(item.id)">
					<view class="item">
						<view class="item-image-wrap">
							<u--image class="item-image" width="100%" height="500rpx" :showLoading="true"
								:src="item.pic" mode="aspectFill">
								<template v-slot:loading>
								    <u-loading-icon></u-loading-icon>
								</template>
							</u--image>
							<view class="title-wrap">
								<rich-text :nodes="item.title" class="u-line-1 title"></rich-text>
							</view>
						</view>
						<view class="summary-wrap">
							<rich-text :nodes="item.summary" class="u-line-2 summary"></rich-text>
						</view>
					</view>
				</view>
			</uni-col>
		</uni-row>
		<u-loadmore :status="!isLastPage ? 'loading':'nomore'" />
		<u-back-top :scroll-top="scrollTop" :iconStyle="{color: '#2979ff'}"></u-back-top>
	</view>
</template>

<script>
	import {
		list
	} from "../../api/mitoPost"

	export default {
		name: "post-list",
		props:{
			sort: {
				type: String,
				default(){
					return ""
				}
			}
		},
		data() {
			return {
				queryParams: {
					pageNum: 1,
					sortField: this.sort
				},
				isLastPage: false,
				data: [],
				scrollTop: 0
			}
		},
		mounted() {
			this.query()
		},
		methods: {
			myPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			async myPullDownRefresh() {
				this.restQueryParams()
				await this.query()
				uni.stopPullDownRefresh()
			},
			myReachBottom() {
				this.queryParams.pageNum++;
				this.query()
			},
			query() {
				if (!this.isLastPage) {
					return list(this.queryParams).then(res => {
						const {
							content,
							last
						} = res
						console.log(content, last)
						this.data.push(...content)
						this.isLastPage = last
					})
				}
			},
			restQueryParams() {
				this.data = []
				this.isLastPage = false
				this.queryParams = {
					...this.queryParams,
					pageNum: 1
				}
			},
			viewPost(id) {
				uni.$u.route({
					url: "pages/post-detail/post-detail",
					params: {
						id
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {

		.item {
			background-color: $u-bg-color;
			margin-bottom: 8rpx;
			display: flex;
			flex-direction: column;

			.item-image-wrap {
				position: relative;
				height: 500rpx;

				.item-image {
					width: 100%;
					height: auto;
				}
			}

			.title-wrap {
				padding: 8rpx 8rpx;
				box-sizing: border-box;
				background-color: rgba(0, 0, 0, 0.3);
				color: $u-primary-light;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
			}

			.title {
				text-align: center;
				width: 100%;
				line-height: 48rpx;
			}

			.summary-wrap {
				padding: 8rpx 8rpx;

			}

			.summary {
				height: 84rpx;
				line-height: 42rpx;
			}
		}
	}
</style>
